<html>
    <head>
        <meta charset="utf-8">
        <meta
            content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"
            name="viewport"/>
        <title>React 学习！！</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="../bower_components/react/react.min.js"></script>
        <script src="../bower_components/react/react-dom.min.js"></script>
        <script src="../bower_components/react/browser.min.js"></script>
        <script src="../js/styleSheets.js" type="text/javascript"></script>
        <script type="text/babel">
            /*
      事件机制：
      1.原生js中采用的是onclick的书写方法，而在React中，则需要onClick
      2.原生中是onclick="EventFunction()"进行调用，而React中则是onClick={this.EventFunction}
      3.React中function定义与render属于同级
      4.React中支持PC、移动的相应事件，并且以移动端事件为优先级
      5.在function中可以传递相应的参数，比如说事件参数，可以与原生js的事件相对比

      思考：
      如果想把多个事件放到jsx中供我们对象调用，需要如何考虑（与CSS处理类似）？
     */

            var MessageBox = React.createClass({
                getInitialState:function(){
                    return {
                        result:null
                    }
                },
                handlerClick: function () {
                    // alert("This is click event");
                   return (
                        this.setState({
                        result:"password"
                      })
                    )
                },
                handlerTouch: function (event) {
                    alert("This is TouchEnd event");
                    console.log(event);
                },
                render      : function () {
                    var _css = this.CSS;

                    return (
                        <div style={styleSheets.div}>
                            <h1 style={styleSheets.h1}>Hello React!</h1>
                            <p style={_css.p}>React content message</p>
                            <button onClick={this.handlerClick}>点击事件</button>

                            {this.state.result}
                            <button onTouchEnd={this.handlerTouch}>触摸结束</button>
                        </div>
                    )
                }
            });

            MessageBox.prototype.CSS = {
                p: {
                    color: "blue"
                }
            };

            ReactDOM.render(
                <MessageBox/>,
                document.getElementById('app'),
                function () {
                console.log('渲染完成啦！！');
            }
            )
        </script>
    </body>
</html>